<template>
  <view class="user-render">
    <view class="user-message">
      <text :selectable="true">
        {{ messageText }}
      </text>
      
      <!-- 文件展示区域 -->
      <scroll-view v-if="chatFileList.length > 0" scroll-x="true" class="file-scroll">
        <view class="file-container">
          <view 
            v-for="(file, index) in chatFileList" 
            :key="index" 
            class="file-item"
            @click="previewFile(index)"
          >
            <image 
              :src="file.fileUrl" 
              mode="aspectFill" 
              class="file-image"
            />
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import { previewFile } from '@/api/uploadConfig';
  export default {
    props: {
      content: {
        default: {
          content: '',
          files: ''
        }
      }
    },
    computed: {
      messageText() {
        return this.content?.content || '';
      },
      chatFileList() {
        let fileList = Array.isArray(this.content?.files) ? this.content?.files : [];
        fileList = fileList.map(item => {
          const { id, fileUrl } = item;
          return {
            id,
            fileUrl: `${previewFile}/${fileUrl}`
          };
        });
        return fileList;
      }
    },
    data() {
      return {};
    },
    methods: {
      // 预览文件
      previewFile(index) {
        const urls = this.chatFileList.map(item => item.fileUrl);
        uni.previewImage({
          current: urls[index], // 当前显示图片的链接
          urls: urls, // 需要预览的图片链接列表
          indicator: "number", // 图片指示器样式
          loop: true // 是否可循环预览
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .user-render {
    display: flex;
    justify-content: flex-end; /* 用户消息靠右显示 */
    margin-bottom: 20rpx * 2;
    .user-message {
      max-width: 60%;
      padding: 14rpx 20rpx;
      background: linear-gradient(to right, #6a75ff 0%, #1689ff 100%);
      border-radius: 16rpx;
      border-bottom-right-radius: 0rpx;
      color: #fff;
      font-size: 28rpx;
      line-height: 1.5;
      word-break: break-word; /* 处理长单词换行 */
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
      /* 渐变文字效果（可选） */
      text-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.2);
      
      /* 文件滚动区域样式 */
      .file-scroll {
        width: 100%;
        margin-top: 16rpx;
        white-space: nowrap;
        .file-container {
          display: inline-block;
          .file-item {
            display: inline-block;
            margin-right: 12rpx;
            width: 100rpx;
            height: 100rpx;
            border-radius: 8rpx;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.2);
            &:last-child {
              margin-right: 0;
            }
            .file-image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
</style>